import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { _HttpClient } from '@delon/theme';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { ApiService } from '@core/services/api';
import { STData } from '@delon/abc';
import { type } from 'os';
import { ACLService } from '@delon/acl';

@Component({
  selector: 'app-call-record',
  templateUrl: './call-record.component.html',
  styles: ['>>>video{object-fit:fill}']
})
export class CallRecordComponent implements OnInit {
  @ViewChild('st',{static:false}) st:TablePageComponent;
  config: SPage = {
    columns: [
      {
        index: 'callName',
        title: '主叫',
        width:100,
        filter:{
          placeholder:'主叫姓名',
          type:'string'
        }
      },
      {
        index: 'imageUrl1',
        title: '抓拍图片',
        width:150,
        type: ColumnType.img,
        className:'personimage'
      },
      {
        index: 'callAdress',
        title: '主叫地址',
        width:300,
        filter:{
          placeholder:'主叫地址',
          type:'string'
        }
      },
      {
        index: 'calledName',
        title: '被叫',
        width:120,
        filter:{
          placeholder:'被叫姓名',
          type:'string'
        }
      },
      {
        index: 'calledAdress',
        title: '被叫地址',
        width:300,
        filter:{
          placeholder:'被叫地址',
          type:'string'
        }
      },
      {
        index:'callTime',
        title:'发起时间',
        width:150,
        filter:{
          index:'beginTime',
          placeholder:'开始时间',
          type:'date',
          format:'YYYY-MM-DD'
        }
      },
      {
        index:'callStartTime',
        title:'通话开始时间',
        width:150,
        filter:{
          index:'endTime',
          placeholder:'结束时间',
          type:'date',
          format:'YYYY-MM-DD'
        }
      },
      {
        index:'callDuration',
        title:'通话时长(秒)',
        width:120,
      },
      {
        index: '',
        title: '操作',
        width:100,
        fixed:'right',
        buttons:[
          {
            text:'查看视频',
            click:(_record)=>{
              console.log(_record)
              this.videoWach(_record)
            }
          }
        ]
      }
    ],
    showCheckBox: false,
    defaultParam:{order:'createTime desc'},
    reqUrl:'/core/call/record/page'
  }
  constructor(private http: _HttpClient,  private api: ApiService, private modal: NzModalService,private img: ElementRef, private message: NzMessageService,private aclService: ACLService) { }
  
  imageInfo(imageUrl: string,type:number): void {
    let img = '<img width="100%" src="'+imageUrl+'">'
    if(type == 0){//表示此记录是设备呼叫记录
        img = '<img width="100%" height="600px" src="'+imageUrl+'">'
    }
    const modal = this.modal.create({
      nzTitle: '图片信息',
      nzContent: img,
      nzWidth: 400,
      nzFooter: null
    })
  }
  videoWach(param):void{
    let video = '<video width="100%" src="'+param.videoUrl+'" controls="controls"></video>'
    if(param.type == 1){//表示是设备呼叫记录
      video = '<video width="100%" height="600px" style="object-fit:fill" src="'+param.videoUrl+'" controls="controls"></video>'
    }
    const modal = this.modal.create({
      nzTitle: '视频信息',
      nzContent: video,
      nzWidth: 600,
      nzFooter: null
    })
  }
  ngOnInit() {
  }
  ngAfterViewInit(){
    const self=this
    document.getElementsByTagName('table')[0].addEventListener('click',function(e){
     if(e.target && (<HTMLElement>e.target).nodeName.toLowerCase() == "img"){
       let src=(< HTMLMediaElement>e.target).currentSrc
      const parentElement=(<HTMLElement>e.target).parentNode.parentNode.previousSibling
      const childElement=(<HTMLElement>parentElement).querySelector('[title="设备"]')
      if(childElement){//表示是linux设备呼叫记录
        self.imageInfo(src,0)
      }else{
        self.imageInfo(src,1)
      }
     }
    })
  }
  operate(e: any): void {
    console.log(e);
  }

}
